<template>
	<view class="PendingOrderPro">
		<navBar><template #head>订单完成</template></navBar>
		<view class='secureCase'>
			<view class="item" v-for="item in orderList" :key="item.id">
				<view class="topTitle">
					<view class="h3">{{item.state}}</view>
					<view class="color">{{item.purchaseState}}</view>
				</view>
				<view class="date">
					<view>
						{{item.date}}
					</view>
					<view class="color">
						单价：1.102USDT
					</view>
				</view>
				<view class="content">
					<view>
						<text>{{item.purchaseNum}}</text>
						<view class='small'>KOI收购数量</view>
					</view>
					<view class="borderLeft"></view>
					<view>
						<text>{{item.disburse}}</text>
						<view class='small'>USDT支出数量</view>
					</view>
				</view>
			</view>
			<view class='info'>
				<view>
					<text>收购单号</text>
					<view class="right" @click="copy(Num)">
						{{Num}}
						<image class='img' src="/static/images/Order/order_copy.png" mode=""></image>
					</view>
				</view>
				<view>
					<text>创建时间</text>
					<view class="right">
						hf9iwbonjcvh094f3r
					</view>
				</view>
				<view>
					<text>完成时间</text>
					<view class="right">
						hf9iwbonjcvh094f3r
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref } from 'vue'
	import { onLoad } from '@dcloudio/uni-app';
	import navBar from '../../components/navBar/index.vue'
	import { copy } from '@/utils/copy'

	const orderList = ref([])
	const Num = ref('hf9iwbonjcvh094f3r')
	onLoad((parmas : any) => {
		// console.log()
		orderList.value.push(JSON.parse(parmas.id))
	})
</script>

<style lang="scss" scoped>
	.PendingOrderPro {
		min-height: 100vh;

		.secureCase {
			padding-top: 0 !important;
		}

		.item {
			padding: 32px;
			height: 278px;
			margin-bottom: 24px;
			background: #2A2B2E;
			border-radius: 16px;
			box-sizing: border-box;
			color: white;
			text-align: center;

			.topTitle {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.h3 {
					font-size: 28px;
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					line-height: 40px;
				}

				.color {
					font-size: 24px;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #F8444D;
					line-height: 33px;
				}
			}

			.content {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 24px;
				padding: 0 74px;
				box-sizing: border-box;

				uni-text {
					height: 56px;
					font-size: 40px;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					line-height: 56px;
					letter-spacing: 1px;
				}

				.small {
					height: 33px;
					font-size: 24px;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					line-height: 33px;
				}

				.borderLeft {
					width: 1px;
					height: 70px;
					background-color: rgba(255, 255, 255, .2);
				}
			}

			.date {
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 29px;
				margin-top: 24px;
				font-size: 24px;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #737375;
				line-height: 33px;

				.color {
					font-size: 24px;
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					color: #44D7B6;
					line-height: 33px;
				}
			}
		}

		.info {
			height: 240px;
			padding: 0 32px;
			background: rgba(255, 255, 255, .2);
			border-radius: 16px;
			font-size: 24px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 80px;
			box-sizing: border-box;

			>uni-view {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.right {
					display: flex;
					align-items: center;
					color: rgba(255, 255, 255, .2);
				}

				.img {
					width: 30px;
					height: 30px;
					margin-left: 4px;
				}
			}
		}
	}
</style>